<template>
  <view class="share">
		<image class="bg-set" src="../../static/global-bg.jpg" mode="widthFix"></image>
		<view class="travel-man">
			<image src="http://192.168.31.170:8000/woman.png" mode="widthFix"></image>
		</view>
    <view class="share-tab">
      <view class="share-tab-title">
        <view class="title-inner">
          <uni-segmented-control
            :current="current"
            :values="items"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#fa541c"
          ></uni-segmented-control>
        </view>
      </view>
    </view>
    <view class="share-tab-content">
			<view v-if="current === 0">
			  <station1></station1>
			</view>
        <view v-if="current === 1">
          <station2></station2>
        </view>
        <view v-if="current === 2">
          <station3></station3>
        </view>
    </view>
  </view>
</template>

<script>
import Station1 from './station1.vue'
import Station2 from './station2.vue'
import Station3 from './station3.vue'
import {uniSegmentedControl} from '@/components/uni-segmented-control/uni-segmented-control.vue'
export default {
  components: {
    uniSegmentedControl,
		Station1,
		Station2,
		Station3
  },
  onLoad() {
    console.log(this.current)
  },
  data() {
    return {
      items: ['第一站','第二站','第三站'], // 头部导航条目
      current: 0, // 当前导航索引
    }
  },
  methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
			}
		},
  }
}
</script>
<style lang='scss'>
  .share {
    .share-tab {
      .share-tab-title {
        position: relative;
        .title-inner {
          width: 70%;
          margin: 0 auto;
					color: #FFFFFF;
        }
      }
    }
  }
	.travel-man {
		position: absolute;
/* 		height: 300upx;
		width: 300upx; */
		height: 100upx;
		width: 100upx;
		bottom: 10upx;
		right: 0upx;
		animation: man 8s steps(16) infinite;
	}
	@keyframes man {
		0% {
			bottom: 0%;
			right: 0%;
		}
		25% {
			bottom: 5%;
			right: 25%;
		}
		50% {
			bottom: 10%;
			right: 50%;
		}
		100% {
			bottom: 15%;
			right:100%;
		}
	}
</style>

